<template>
	<div class="detection-wrapper">
		<el-row>
			<el-col span="12">
				<p class="text">开启实时活体检测</p>
			</el-col>
			<el-col span="12">
				<el-radio-group v-model="isRealTime" :disabled="showDetail" @change="changeRealTime">
					<el-radio v-for="item in keyLabelOptions" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-col>
		</el-row>
		<el-row>
			<el-col span="12">
				<p class="text">检测时间间隔</p>
			</el-col>
			<el-col span="8">
				<el-input
					v-model="intervalMS"
					:disabled="showDetail || isRealTime === 0"
					type="number"
					class="width-input detection-input"
					@mousewheel.native.prevent
					@keyup.native="preventInputIntervalMs($event)"
					@input="changeIntervalMS"
					id="input"
					min="0"
				></el-input>
			</el-col>
			<el-col span="4">
				<p class="text">ms</p>
			</el-col>
		</el-row>
		<el-row>
			<el-col span="12">
				<p class="text">阈值</p>
			</el-col>
			<el-col span="8">
				<el-input
					v-model="confidence"
					:disabled="showDetail || isRealTime === 0"
					type="number"
					class="width-input threshold-input"
					@mousewheel.native.prevent
					@keyup.native="preventInputConfidence($event)"
					@input="changeConfidence"
					id="input"
					min="0"
				></el-input>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow.js';
import { validateByCategory, getBizscenariosInfo } from '@/api/api.js';
export default {
	props: {
		showDetail: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			isRealTime: 0,
			intervalMS: null,
			confidence: null,
			keyLabelOptions: AIWorkflow.getKeyLabelOptions(),
			rebotExceptionOptions: AIWorkflow.getRebotExceptionOptions(),
			isOpenQuality: false, // 是否开启人脸比对 实时质检！
			scenId: AIWorkflow.setBusinessId(this.$route.query.bizscenariosId) || JSON.parse(sessionStorage.getItem('sceneData'))?.id
		};
	},
	mounted() {
		if (AIWorkflow && AIWorkflow.detectLivingFace) {
			const { isRealTime = false, intervalMS = 0, confidence = 0 } = AIWorkflow.detectLivingFace;
			this.isRealTime = isRealTime ? 1 : 0;
			this.intervalMS = intervalMS;
			this.confidence = confidence;
		} else {
			this.isRealTime = 0;
			this.intervalMS = '';
			this.confidence = '';
		}
		this.getIsOpenQuality();
	},
	methods: {
		preventInputConfidence(e) {
			console.log('prevent', e, e.target.value);
			return AIWorkflow.preventInputConfidence(e, 0, 100);
		},
		preventInputIntervalMs(e) {
			console.log('prevent', e, e.target.value);
			return AIWorkflow.preventInputIntervalMs(e, 1000, 60 * 60 * 1000);
		},
		// checkNum(e) {
		// 	return AIWorkflow.checkNum(e);
		// },
		changeConfidence(e) {
			this.confidence = e;
			AIWorkflow.setDetectLivingFace({ confidence: parseInt(this.confidence, 10) });
		},
		changeIntervalMS(e) {
			console.log(e);
			this.intervalMS = e < 0 ? 0 : e;
			AIWorkflow.setDetectLivingFace({ intervalMS: parseInt(this.intervalMS, 10) });
		},
		changeRealTime(val) {
			console.log(val);
			if (this.isOpenQuality && val === 0) {
				this.$message.error('实时质检添加了活体检测项，无法关闭！');
				this.isRealTime = 1;
				return;
			}
			AIWorkflow.setDetectLivingFace({ isRealTime: val === 1 });
		},
		// 获取当前业务场景下是否开启了实时质检，并且设置了活体检测。默认是false。
		async getIsOpenQuality() {
			try {
				const { data } = await getBizscenariosInfo(this.scenId);
				if (data?.details) {
					console.log('getIsOpenQuality', data);
					const { isRealTimeQualityOn } = data.details;
					// isRealTimeQualityOn true || fasle  是否开启实时质检
					if (isRealTimeQualityOn === false) {
						return;
					} else {
						this.isOpenQuality = isRealTimeQualityOn;
						console.log(this.isOpenQuality, 'isRealTimeQualityOn', isRealTimeQualityOn);
						this.getSingleByQualityes('2');
					}
				} else {
					console.log('getIsOpenQuality  function error', data);
				}
			} catch (error) {
				console.log(error);
			}
		},
		/**
		 * 获取单项实时质检配置数据
		 * @param {Number}  id 实时质检分类id，1=人脸对比，2=活体检测
		 */
		async getSingleByQualityes(id) {
			try {
				const { data } = await validateByCategory(this.scenId, id);
				console.log(data);
				if (data.code === 200) {
					// 业务场景下的实时质检配置。
					// 长度为0，则表示未配置该质检项。
					if (data?.data?.data?.length > 0) {
						this.isOpenQuality = true;
					} else {
						this.isOpenQuality = false;
					}
					console.log(this.scenId, 'detectionLiviing', this.isOpenQuality);
				} else {
					console.log('getSingleByQualityes function error', data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取单项实时质检配置失败！');
			}
		}
	}
};
</script>

<style lang="less" scoped>
.detection-wrapper {
	.text {
		text-align: right;
		padding: 0 30px 0 0;
		line-height: 30px;
	}
	.el-col {
		padding: 10px 0;
	}
}
</style>
